<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备标签 -->
    <div class="box">hello</div>
    <div class="box">world</div>
    <div class="box1">前端</div>
    <div class="box2">额,前端</div>
    <p>使用DOM操作元素</p>
    <p class="box">这是有类名的p标签</p>
    <div id="box">
        <h1>这是div中一级标题</h1>
    </div>
</body>
<script>
    //获取页面元素：querySelector()和querySelectorAll()
    //做认识：getElementById(),getElementsByTagName(),getElementsByName(),getElementsByClassName()
    //let const
    //querySelector('选择器名字')只会获取第一个元素；选择器可以是标签选择器，类选择器(.类名) 和ID选择器(#ID名)
    const elm1 = document.querySelector('div');  //通过标签选择
    console.log(elm1);
    const elm2 = document.querySelector('.box1');  //通过类选择器拿到元素
    console.log(elm2);
    const elm3 = document.querySelector('#box h1 li:nth-child(5)');   //复合选择器
    console.log(elm3);
    console.log('.......................');
    const em1 = document.querySelectorAll('div');
    console.log(em1); //伪数组
    for(let i=0; i<em1.length;i++){
        console.log(em1[i]); 
    }
    em1[2].style.color = 'red';

    
</script>
</html>